<template>
  <div class="all">
    <div class="top">
      <div class="input">
        <el-input
            placeholder="请输入关键字"
            v-model="input"
            clearable>
        </el-input>
      </div>
      <div class="button">
        <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleSearch">搜索
        </el-button>
      </div>
    </div>
    <div class="bottom">
      <div class="card">
        <el-card shadow="never" :body-style="{ padding: '20px 20px 20px 20px' }">
          <el-table
              :data="tableData"
              stripe
              style="width: 100%">
            <el-table-column
                prop="title"
                label="书名">
            </el-table-column>
            <el-table-column
                prop="author"
                label="作者">
            </el-table-column>
            <el-table-column
                prop="publisher"
                label="出版社">
            </el-table-column>
            <el-table-column
                prop="categoryText"
                label="分类">
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import {getAll} from "@/api";

export default {
  data() {
    return {
      input: '',
      tableData: []
    };
  },
  created() {
    // this.tableData = getAll()
    console.log('000');
    this.getList();
  },
  methods: {
    getList() {
      getAll().then(response => {
        console.log('111', response);
      });
    },
    handleSearch() {
      console.log(this.input);
    }
  }
};
</script>

<style>
.el-table .cell {
  /* 内容过长显示成省略号（内容显示为一行） */
  white-space: nowrap; /*设置不换行*/
  overflow: hidden; /*设置隐藏*/
  text-overflow: ellipsis; /*设置隐藏部分为省略号*/
}
</style>
<style lang="scss" scoped>
.all {
  .top {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .input {
      width: 300px;
      margin: 0 20px 0 0;
    }

    .button {
    }
  }

  .bottom {
    margin: 30px 0 0 0;

    .card {
    }
  }
}
</style>
